import React, { useState, useEffect } from "react";
import useGetData from "@hooks/useGetData";
import { Table, Card, Tabs } from 'antd';
const { TabPane } = Tabs;

export function ScoreDetailsComponent({ pageid }) {
  const [apiUrl, setApiUrl] = useState(`/api/school/get_score/${pageid}`);
  const [Data, Dataloading] = useGetData(apiUrl);

  const [scoreData, setScoreData] = useState({});
  useEffect(() => {
    if (Data.length !== 0) {
      setScoreData(Data[0]['SchoolScore']['data'])
    }
  }, [Data])

  const columns = [
    {
      title: '年份',
      dataIndex: ['SchoolScore', 'year'],
      key: 'year',
    },
    {
      title: '最低分',
      dataIndex: 'low',
      key: 'low',
    },
    {
      title: '排名',
      dataIndex: 'rank',
      key: 'rank',
    },
  ];

  return (
    <div>
      <Tabs defaultActiveKey="1" className="my-10">
        {scoreData.length && scoreData.map((scoreCategory, index) => (
          console.log(scoreCategory),
          <TabPane tab={scoreCategory.title} key={index + 1} className="mt-5">
            <Card>
              <Table
                dataSource={scoreCategory.score}
                columns={[
                  {
                    title: '年份',
                    dataIndex: 'year',
                    key: 'year',
                  },
                  {
                    title: '最低分',
                    dataIndex: 'low',
                    key: 'low',
                  },
                  {
                    title: '位次',
                    dataIndex: 'rank',
                    key: 'rank',
                  },
                  {
                    title: '备注',
                    dataIndex: 'school_note',
                    key: 'school_note',
                  }
                ]}
                pagination={false}
                bordered
                loading={Dataloading}
              />
            </Card>
          </TabPane>
        ))}
      </Tabs>
    </div>
  );
}
